<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
    <app></app>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    const student ={
        template:`
          <div>
          <h2>学生姓名：{{studentName}}</h2>
          <h2>年龄：{{age}}</h2>
          </div>
        `,
        data() {
            return{
                studentName:'小王',
                age:19
            }
        }
    }

    const school = {
        template:`
          <div>
          <h2>学校名称：{{schoolName}}</h2>
          <h2>学校地址：{{address}}</h2>
          <student></student>
          </div>
        `,
        data() {
            return{
                schoolName:'哈哈',
                address:'四川南充'
            }
        },
        components: {
            student
        }
    }

    const hello = {
        template:`
          <div>
          <h2>{{hello}}</h2>
          </div>
        `,
        data(){
            return{
                hello:'欢迎您'
            }
        }
    }
    const app = {
        template:`
          <div>
          <school></school>
          <hello></hello>
          </div>
        `,
        components:{
            school,
            hello
        }
    }

    new Vue({
        el:'#root',
        components:{
            app
        }
    })
</script>
</html>